@extends('layouts.header')
@section('title','按主捡人工作量统计')
@section('content')
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 统计分析 <span class="c-gray en">&gt;</span>
        按日期统计
        <a class="btn btn-primary radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <div class="page-container">
        <a href="" class="btn btn-primary radius" id="toExcel" download="主捡人工作量统计表">导出excel</a>
        <form action="/{{config('constant.name_admin')}}/statistics/statisticsByManager" method="post">
            <div class="text-c">
                日期范围：
                <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })"
                       name="date_start" id="datemin"
                       class="input-text Wdate" style="width:120px;" value="{{$date_start}}">
                -
                <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })"
                       id="datemax"
                       name="date_end" class="input-text Wdate" style="width:120px;" value="{{$date_end}}">

                @csrf

                <button type="submit" class="btn btn-success radius">
                    <i class="Hui-iconfont">&#xe665;</i> 查询
                </button>
            </div>
        </form>
        <div class="mt-20">
            <table class="table table-border table-bordered table-hover table-bg table-responsive" id="datatable">
                <thead>
                <tr>
                    <th scope="col" colspan="5">日期范围：{{$date_start}} 至 {{$date_end}}</th>
                </tr>
                <tr class="text-c">
                    <th>主捡人</th>
                    <th colspan="2">检测样品及数量</th>
                    <th>检测项目数量</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($data as $realname => $item)
                    @foreach ($item as $k1=> $val)
                        <tr class="text-c">
                            @if($k1 === 0)
                                <td rowspan="{{ $temp[$val->realname]['rowspan']}}">{{ $val->realname }}</td>
                            @endif
                            <td>{{ $val->tool_name }}</td>
                            <td>{{ $val->sample_count }}</td>
                            <td>{{ $val->item_count }}</td>
                        </tr>
                    @endforeach
                    <tr class="text-c success">
                        <td>{{$realname}}合计：</td>
                        <td>/</td>
                        <td>{{ $temp[$val->realname]['sample_count'] }}</td>
                        <td>{{ $temp[$val->realname]['item_count'] }}</td>
                    </tr>
                @endforeach

                </tbody>
            </table>
        </div>
        <div class="mt-30">
            {{-- 为ECharts准备一个具备大小（宽高）的Dom --}}
            {{-- 46px 一个 --}}
            <div id="echarts" style="width: auto;height:{{$count*40 + 60}}px;"></div>
        </div>
    </div>
    <script src="/admin/lib/echarts/echarts-bar.min.js"></script>
    <script type="text/javascript" src="/admin/static/myfolder/js/statistics/common.js?ver={{config('constant.static_res_ver')}}"></script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
                // formatter:'{b}<br>{a0}：{c0}<br>{a1}：{c1}',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['检测样品数量', '检测项目数量'],
                itemGap: 70,
                textStyle: {
                    fontSize: 16
                },
                top: 20
            },
            color: [
                '#3398DB', '#c23531', '#2f4554', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
            ],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                show: false
            },
            yAxis: {
                type: 'category',
                show: true,
                inverse: true,//是否是反向坐标轴
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    fontSize: 16,
                    color: '#1A73E8',
                    fontWeight: 'bold'
                },
                data: JSON.parse(@json($echarts_data['realname']))
            },
            series: [
                {
                    name: '检测样品数量',
                    type: 'bar',
                    legendHoverLink: false,//是否启用图例 hover 时的联动高亮
                    roundCap: 30,
                    // stack: '总量',
                    barWidth: 30,//柱图宽度
                    // barGap : '-30%',
                    label: {
                        show: true,
                        fontSize: 16,
                        position: 'right'
                    },
                    itemStyle: {
                        barBorderRadius: [0, 15, 15, 0]//圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
                    },
                    data: JSON.parse(@json($echarts_data['item_count']))
                },
                {
                    name: '检测项目数量',
                    type: 'bar',
                    legendHoverLink: false,//是否启用图例 hover 时的联动高亮
                    // stack: '总量',
                    barWidth: 26,//柱图宽度
                    barGap: '-94%',
                    // barMaxWidth: 30,
                    // barMinWidth: 30,
                    // barCategoryGap : '1%',
                    label: {
                        show: true,
                        fontSize: 16,
                        textBorderColor: '#fff',
                        textBorderWidth: 2,
                        position: 'right'
                    },
                    itemStyle: {
                        barBorderRadius: [0, 15, 15, 0] //（顺时针左上，右上，右下，左下）//圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
                    },
                    data: JSON.parse(@json($echarts_data['sample_count']))
                },
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        myChart.showLoading();
        myChart.hideLoading();

        window.addEventListener("resize", function () {
            myChart.resize();
        });

    </script>
@endsection